<template>
  <div class="process-tabs-body">
    <a-tabs @change="processTabsChange">
      <template v-if="!flag || Number(flag) !== 1">
        <a-tab-pane key="0" tab="流程处理">
          <process-processing ref="processing" :process-file-table-data="processFileTableData"/>
        </a-tab-pane>
      </template>

      <a-tab-pane key='1' tab='流程图'>
        <div style="text-align: center; overflow-y: auto; overflow-x: auto">
          <img :src="processTabsImg" alt="流程图">
        </div>
      </a-tab-pane>

      <a-tab-pane key='2' tab='流程日志'>
        <process-log
            :process-log-table-data="processLogTableData"
        />
      </a-tab-pane>

      <template v-if="formGuid">
        <a-tab-pane key='3' tab='附件列表'>
          <a-table
              :rowKey="(record) => record.RN"
              :columns="processFileTableHead"
              :scroll="{x: 100}"
              :dataSource="processFileTableData"
          >
            <template slot="action" slot-scope="value, record">
              <div>
                <a-button type="link" @click="() => processTabsButtonClick(record, 'view')">
                  在线查看
                </a-button>
                <a-button type="link" @click="() => processTabsButtonClick(record, 'down')">
                  下载
                </a-button>
              </div>
            </template>
          </a-table>
        </a-tab-pane>
      </template>

    </a-tabs>
  </div>
</template>

<script>
import {
  filePage,
  getDynamicHeader,
  getFormTaskInstance,
  getInstanceOpinion
} from "@/api/approve/approve";
import {getParams, windowExamineFile} from "@/utils";
import ProcessLog from "@/components/processTabs/components/ProcessLog";
import ProcessProcessing from "@/components/processTabs/components/ProcessProcessing";

const {formGuid} = getParams();

export default {
  name: "ProcessTabs",
  components: {
    ProcessLog,
    ProcessProcessing
  },
  props: {
    instId: {
      type: [String],
      default: () => '',
    },
    defId: {
      type: [String],
      default: () => '',
    },
    taskId: {
      type: [String],
      default: () => '',
    },
    flag: {
      type: [String],
      default: () => '',
    },
    department: {
      type: [String],
      default: () => '',
    }
  },
  watch: {
    instId: {
      deep: true,
      handler: function () {
        this.getProcessTabsBaseImage();
      }
    },
    flag: {
      deep: true,
      immediate: true,
      handler: function (value) {
        if (value && Number(this.flag) === 1) {
          this.getProcessTabsBaseImage();
        }
      }
    }
  },
  data() {
    return {
      formGuid,
      processTabsImg: '',
      processLogTableData: [],
      processFileTableHead: [],
      processFileTableData: []
    }
  },
  async mounted() {
    if (this.flag && Number(this.flag) === 1) {
      this.getProcessTabsBaseImage()
    }
    await this.processTabsChange('0');
  },
  methods: {
    getProcessTabsBaseImage() {
      getFormTaskInstance({
        instId: this.instId,
        defId: this.defId,
        taskId: this.taskId
      }).then((res) => {
        const imgBase64 = new Blob([res.data], {
          type: "imageType"
        })
        this.processTabsImg = window.URL.createObjectURL(imgBase64)
      })
    },
    async processTabsChange(value) {
      const {formGuid: guid, fileType: type} = getParams();
      if (Number(value) === 0) {
        await this.getFilePage({guid, status: "", type});
      } else if (Number(value) === 1) {
        this.getProcessTabsBaseImage();
      } else if (Number(value) === 2) {
        getInstanceOpinion({
          instId: this.instId
        }).then(res => {
          const {success, data} = res
          if (success) {
            this.processLogTableData = data
          } else {
            this.processLogTableData = []
          }
        })
      } else if (Number(value) === 3) {
        getDynamicHeader({tableId: '14', isVerify: false}).then(async res => {
          const {success, data} = res
          if (success) {
            this.processFileTableHead = [{
              title: '操作',
              dataIndex: 'action',
              align: "center",
              width: 200,
              fixed: 'left',
              scopedSlots: {customRender: 'action'},
            }, ...data.headList];
            await this.getFilePage({guid, status: '', type});
          } else {
            this.processFileTableHead = [];
          }
        })
      }
    },
    async getFilePage(record) {
      await filePage({...record}).then(res => {
        const {success, data} = res
        if (success) {
          this.processFileTableData = data
        } else {
          // processFileTableData不能传字符串
          // this.processFileTableData = '暂无数据'
          this.processFileTableData = []
        }
      })
    },
    processTabsButtonClick(record, type) {
      windowExamineFile({
        ...record,
        type
      })
    }
  }
}
</script>

<style scoped lang="less">
.process-tabs-body {
  padding: 0 15px;

  /deep/ .ant-form {
    border: 1px solid #ced5e1;
    margin-bottom: 15px;

    .ant-form-item {
      background: #e7ebf3;
      margin-bottom: 0;
    }

    .ant-form-item:not(:last-child) {
      border-bottom: 1px solid #ced5e1;
    }

    .ant-form-item-label {
      padding: 6px 5px;
    }

    .ant-form-item-control-wrapper {
      background: white;
      border-left: 1px solid #ced5e1;
      min-height: 51px;

      .ant-form-item-control {
        padding: 6px 15px;
        min-height: 51px;
        display: flex;
        align-items: center;

        .ant-form-item-children {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .process-tabs-body-processing-radio {
          display: flex;

          .processing-title {
            width: 80px;
            min-width: 80px;
            text-align: right;
            padding: 0 15px 0 0;
          }

          .processing-radio-body {
            display: flex;
            align-items: center;
            flex: 10;
          }
        }

        .process-upload {
          color: black;
          border-radius: 4px;
          padding: 0 30px;
        }

        .process-submit {
          background: #1890ff;
          color: white;
          border-radius: 4px;
          border-color: #1890ff;
          padding: 0 40px;
        }
      }
    }
  }
}
</style>
